
// -------------- 1. 页面功能初始化  复制 发布初始化 js
// -----1.1 加载下拉框类别数据
let form = layui.form;
$.ajax({
    url: '/my/article/cates',
    success: function (res) {
        // console.log(res);
        if (res.status == 0) {
            let str = '<option value="">请选择文章类别</option>';
            res.data.forEach(function (item, index) {

                str += `
                <option value="${item.Id}">${item.name}</option>
                `;
                $('select').html(str);
                // form模块：如果表单元素动态插入，样式不会跟着动态渲染
                // 需要调用渲染更新方法
                form.render('select');
            });
        }
        // 数据回填  在这个回调中调用数据回填(解决类别获取不到的问题)
        get();
    }
});

// ---- 1.2 富文本编辑器
initEditor();

// ---- 1.3 图片裁剪插件
// - 调用cropper方法，创建剪裁区
$('#image').cropper({
    // 纵横比(宽高比)
    aspectRatio: 1, // 正方形
    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
});

//  用有样式的按钮代替原生按钮
$('.upload-btn').click(function (e) {
    $('#file').click();
});

//  原生按钮选择文件发生改变时 的 事件
$('#file').change(function () {
    // 1. 获取文件对象 得到选的图片的路径  
    // console.log(this.files);
    let obj = this.files[0];

    // 专门方法，把图片对象转为临时的地址字符串
    let url = URL.createObjectURL(obj);
    //  通过cropper插件替换成选的图片 查文档
    $('#image').cropper('replace', url);
});


// ---------------------------  2. 数据回填-表单赋值！
// 编辑 是一个单独的页面
// console.log(location.href); // http://127.0.0.1:5500/article/edit/edit.html?id=63549
// 出现问题：分类框内容获取不到，因为ajax请求中的的success是一个回调函数，这边可能获取不到
// 解决办法： 封装到函数里，再上个 success 回调完成后，调用数据回填

// 2.1 获取该文章对应 id
let url = location.href;
let id = url.split("=")[1];
// console.log(id);
// 2.2 获取该文章的数据, 然后回填 
function get() {
    $.ajax({
        url: '/my/article/' + id,
        success: function (res) {
            if (res.status == 0) {
                console.log(res.data);
                // layui的form.val() 表单赋值，注意form表单需要设置属性lay-filter="edit"
                form.val("edit", res.data);
                // --------------------  图片被插件处理了，又是单独设置
                $('#image').cropper("replace", 'http://ajax.frontend.itheima.net' + res.data.cover_img);
            }
        }
    });
}


// -------------------------- 3. 更新 (仿造新增js代码)
// ---------------------------  发布
let layer = layui.layer;
// 1) 注册提交事件
$('form').submit(function (e) {
    e.preventDefault();

    // 2) 收集数据：标题、下拉框、状态
    // new FormData()  表单name属性值和接口一致
    let fd = new FormData(this);
    fd.append('Id', id);

    // 内容
    fd.set('content', tinyMCE.activeEditor.getContent());

    // 收集到 剪裁图片后的canvas对象
    let canvas = $('#image').cropper('getCroppedCanvas', {
        width: 400,
        height: 280
    });

    // 得到图片对象
    // 把收集的图片对象 转成 blob 形式 ： 对象形式
    canvas.toBlob(function (blob) {
        fd.append('cover_img', blob);

        // 把 ajax 请求写在 这里，因为 blob是回调函数，不然fd收集不到图像数据
        $.ajax({
            type: 'post',
            url: '/my/article/edit',
            data: fd,
            // ajax 使用 formdata收集数据，需要设置 不编码 、不拼接
            processData: false,
            contentType: false,
            success: function (res) {
                layer.msg(res.message);

                // 产品设计：页面转跳文章列表页面
                if (res.status == 0) {
                    // 模拟a点击行为  edit页面的父级是index页面，编辑按钮在list页面
                    window.parent.document.querySelector('#list').click();
                }
            }
        });

    });
});

console.log(window.parent.key);  // edit页面的父级是index页面


